<!--
 * @Author: 山有扶苏 2684362688@qq.com
 * @Date: 2023-03-02 10:55:36
 * @LastEditors: 锡诚 3343785462@qq.com
 * @LastEditTime: 2023-03-06 22:55:49
 * @FilePath: \专业见习1\vue-project\src\views\MyView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="top_1">
    <div class="top_1_1"></div>
    <div class="top_1_2">
        <span class="top_1_2_1">帮助中心</span>
        <span class="top_1_2_2">简体中文 ⬇</span>
    </div>
</div>

<div class="top_2">
    <div class="top_2_1">
        <div class="top_2_2"></div>
        <van-image
        width="160px"
        height="26px"
        fit="cover"
        position="center"
            src=""
        />
    </div>
    <div class="top_2_2">
        <span>登录欢太帐号可享受更多的服务</span>
    </div>
</div>
<div class="mid">
    <div class="mid_1">
        <div class="mid_1_1">
            <span>短信验证码登陆</span>
        </div>
        <div class="mid_1_2">
            <span>密码登陆</span>
        </div>
    </div>    
    <van-form @submit="onSubmit">
        <van-cell-group inset>
        <van-field
            v-model="username"
            name="用户名"
            label=""
            placeholder="电话号码"
            :rules="[{ required: true, message: '请填写电话号码' }]"
        />
        <van-field
            v-model="code"
            center
            clearable
            label=""
            placeholder="请输入验证码"
        >
        <template #button>
            <van-button
                size="small"
                type="primary"
                color="#2ad181"
                :disabled="sendCodeBtn"
                @click="sendCode()"
            >{{ sendCodeBtnText }}</van-button>
        </template> 
        </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
        <van-button
            round
            block
            type="primary"
            to="my"
            native-type="submit"
            color="#2ad181"
        >
            登录
        </van-button>
        </div>
    </van-form>
    <div class="mid_2">
        <span>注册账号</span>
    </div>
</div>

<div class="bottom">
    <div class="bottom_1">
        <span>隐私政策</span>
    </div>
    <div class="bottom_2">
        <span>© 2005 - 2023 广东欢太  版权所有  粤ICP备14056724号</span>
        <span>联系方式:4001-999-666</span>
    </div>
</div>
</template>

<script setup>
    import { ref } from "vue";
    import { useRouter } from "vue-router";
    import { createApp } from 'vue';
    import { Image as VanImage } from 'vant';

    const app = createApp();
    app.use(VanImage);

    const router = useRouter();
    const sendCodeBtn = ref(false);
    const sendCodeBtnText = ref("获取验证码");
    const onSubmit = () => {
    // 判断用户名和验证码
    console.log(username.value);
    console.log(code.value);
    // 储存用户信息
    sessionStorage.setItem("user", username.value);
    // 跳转到首页
    // router.push("my");
    };

    const sendCode = () => {
    // 禁用按钮
    sendCodeBtn.value = true;
    const sendCodeTime = ref(60);
    if (sendCodeTime.value > 0) {
    const interValueId = setInterval(() => {
        sendCodeTime.value--;
        sendCodeBtnText.value = sendCodeTime.value + "秒后重发";
        if (sendCodeTime.value == 0) {
            clearInterval(interValueId);
            sendCodeBtnText.value = "发送验证码";
            sendCodeBtn.value = false;
        }
    }, 1000);
    }
    let code = "";
    for (let i = 0; i < 6; i++) {
      code += Math.floor(Math.random() * 10);
    }
    console.log("验证码为:", code);
    };
    const username = ref("");
    const code = ref("");
    </script>

<style lang="less" scoped>
.top_1{
    width: 325px;
    height: 52px;
    padding: 0px 25px;
    display: flex;

    .top_1_1{
        float: left;
        width: 163px;
        height: 52px;
    }
    .top_1_2{
        float: right;
        font-size: 14px;
        color: #7f7f7f;
        text-align: center;
        padding-top: 17px;
        .top_1_2_1{
            padding-right: 28px;
        }
    }
}

.top_2{
    width: 375px;
    height: 58.5px;
    padding-top: 21px;
    padding-bottom: 31px;

    .top_2_1{
        width: 375px;
        height: 26px;
        margin-bottom: 15.5px;
        .top_2_2{
            width: 0px;
            height: 26px;
            float: left;
            padding-left: 107.5px;
        }
    }
    .top_2_2{
        font-size: 12.5px;
        text-align: center;
    }
}

.mid{
    width: 325px;
    height: 287px;
    padding-left: 25px;
    padding-right: 25px; ;
    padding-bottom: 25px; ;
    padding-top: 21px; ;
    .mid_1{
        width: 325px;
        height: 30px;
        display: flex;
        .mid_1_1{
            width: 141px;
            height: 30px;
            float: left;
            text-align: center;
            padding: 0px 10.5px;
            padding-top: 5px;
            color: #000;
        }
        .mid_1_2{
            width: 141px;
            height: 30px;
            float: right;
            text-align: center;
            padding: 0px 10.5px;
            padding-top: 5px;
            color: #00000080;
        }
    }
}

.bottom{
    width: 325px;
    height: 63px;
    padding: 31px 25px;
    .bottom_1{
        text-align: center;
        font-size: 14.5px;
        color: #5a6e97;
    }
    .bottom_2{
        font-size: 12.5px;
        color:#9b9b9b;
        text-align: center;
    }
}

.mid_2{
    width: 325px;
    height: 20px;
    padding-top: 19px;
    font-size: 14.5px;
    color: #2ad181;
    text-align: center;
}
</style>